<template>
  <div>
    <vue2-org-tree
    :data="data"
    :horizontal="false"     
    :label-class-name="labelClassName"   
    :selected-class-name="selectedClassName"   
    :selectedKey="selected"
    collapsable
    @on-expand="onExpand"  
    @on-node-click="NodeClick"  
    @on-node-mouseover="onMouseover"
    @on-node-mouseout="onMouseout"
    />
    <div v-show="BasicSwich" class="floating">
      <p>ID:{{BasicInfo.id}}</p>
      <p>Name:{{BasicInfo.label}}</p>
  </div>
  </div>
</template>

<script>
import Vue from 'vue'
import 'vue2-org-tree/dist/style.css'
import Vue2OrgTree from 'vue2-org-tree'
 
// Vue.use(Vue2OrgTree)
// import personSelected from '../newDevices/components/personSelected'
export default {
  data () {
    return {
      labelClassName:"bg-color-orange",
      selectedClassName:"bg-color-green",
      data: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端"
              },
              {
                id: 6,
                label: "研发-后端"
              },
              {
                id: 9,
                label: "UI设计"
              },
              {
                id: 10,
                label: "产品经理"
              }
            ]
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部"
              },
              {
                id: 8,
                label: "销售二部"
              }
            ]
          },
          {
            id: 4,
            label: "财务部"
          },
          {
            id: 9,
            label: "HR人事"
          }
        ],
      },
      BasicSwich:false,
      BasicInfo:{id:null,label:null},
      selected:'5',
    }
  },
  components: {
    Vue2OrgTree
  },
  methods: {
    collapse(list) {
      var _this = this;
      list.forEach(function(child) {
          if (child.expand) {
            child.expand = false;
          }
          child.children && _this.collapse(child.children);
      });
    },
    onExpand(e,data) {
        if ("expand" in data) {
          data.expand = !data.expand;
            if (!data.expand && data.children) {
                this.collapse(data.children);
            }
        } else {
            this.$set(data, "expand", true);
        }
    },
    toggleExpand(data, val) {
        var _this = this;
        if (Array.isArray(data)) {
            data.forEach(function(item) {
              _this.$set(item, "expand", val);
              if (item.children) {
                _this.toggleExpand(item.children, val);
              }
            });
        } else {
            this.$set(data, "expand", val);
            if (data.children) {
              _this.toggleExpand(data.children, val);
            }
        }
    },
    NodeClick(e,data){
        console.log(e)
        // e 为 event
        console.log(data)
        // 当前项的所有详情 如：id label children
    },
    onMouseout(e, data) {
    this.BasicSwich = false
    },
    onMouseover(e, data) {
      this.BasicInfo = data;
      this.BasicSwich = true;
      var floating =  document.getElementsByClassName('floating')[0];
      floating.style.left = e.clientX +'px';
      floating.style.top = e.clientY+'px';
    },
  },
  mounted () {
    this.toggleExpand(this.data,true)
  },
  
}
</script>

<style lang="less">
.bg-color-orange{
    color: #fff;
    background-color: orange;
}
.bg-color-green{
    color: #333;
    background-color: green;
}
.floating{
    background: rgba(0, 0, 0, 0.7);
    width: 160px;
    height: 100px;
    position: absolute;
    color: #fff;
    padding-top: 15px;
    border-radius: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    left:0;
    top: 0;
    transition: all 0.3s;
    z-index: 999;
    text-align: left;
    font-size: 12px;
}
</style>
